<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no,
		initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/my_class.css" />
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/>
		<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="my_class ">
			<div class="img container">
				<img src="img/我的课程/组%2049@2x.png">
			</div>
			<p class="text container"><span>我的课程</span></p>

			<div class="main">
				<ul class="aside">
					<li class="cotten">计算机类</li>
					<li>操作类</li>
					<li>文科类</li>
				</ul>
				<ul class="right"style="display: block;">
					<li>
						<img src="img/我的课程/图层%201@2x.png">
						<div>
							<p style="font-size:0.32rem;margin: 0.2rem 0;">生活实用心理学课程教你，<br>轻松应对生活难题</p>
							<p style="font-size: 0.266666rem;">共30讲</p>
						</div>
					</li>
					<li>
						<img src="img/我的课程/500577327@2x.png">
						<div>
							<p style="font-size:0.32rem;margin: 0.2rem 0;">生活实用心理学课程教你，<br>轻松应对生活难题</p>
							<p style="font-size: 0.266666rem;">共30讲</p>
						</div>
					</li>
					<li>
						<img src="img/我的课程/501025475@2x.png">
						<div>
							<p style="font-size:0.32rem;margin: 0.2rem 0;">生活实用心理学课程教你，<br>轻松应对生活难题</p>
							<p style="font-size: 0.266666rem;">共30讲</p>
						</div>
					</li>
				</ul>
				<ul class="right">
					<li>132</li>
				</ul>
				<ul class="right">
					<li>46464</li>
				</ul>
				<ul class="footer">
					<li><a href="#"><span>&#xe8b9;</span><span>首页</span></a></li>
					<li><a href="#"><span style="color: orange;">&#xe614;</span><span>课程</span></a></li>
					<li><a href="#"><span>&#xe8bd;</span><span>话题</span></a></li>
					<li><a href="#"><span >&#xe8a0;</span><span>我的</span></a></li>
				</ul>
				
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	var aside =document.querySelector('.aside');
	var lis = aside.querySelectorAll('li');
	var items = document.querySelectorAll('.right');
	for(var i =0;i<lis.length;i++){
		// 开始给小烈设置索引号
		lis[i].setAttribute('index',i);
		lis[i].onclick = function(){
			for(var i =0;i<lis.length;i++){
				lis[i].className='';
			}
			this.className='cotten';
			// 下面的显示内容
			var index = this.getAttribute('index');
			console.log(index);
			for(var i =0;i<items.length;i++){
				items[i].style.display="none";
			}
			items[index].style.display="block";
		}
	}
</script>